<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				<span>申请加入学生组织</span>
				<a-icon @click="closeFunction" :style="{ float: 'right', margin: '10px' }" type="close-circle" />
			</p>
			<div class="main" id="new_message">
				<a-form ref="ruleForm" :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
					<a-form-item label="学生组织" prop="Reason">
						{{text.Name}}
					</a-form-item>
					<a-form-item label="加入理由">
						<a-input v-decorator="['Reason', { rules: [{ required: true, message: '请输入加入理由' }] }]" type="textarea" :auto-size="global.textareaHeight" />
					</a-form-item>
					<a-form-item v-for="item in data" :label="item.Name">
						<a-input v-if="item.FieldType == 1" v-decorator="[
								item.ID,
								{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
							]" />
						<a-input v-if="item.FieldType == 2" type="textarea" :auto-size="global.textareaHeight"
							v-decorator="[
								item.ID,
								{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
							]" />
						<a-input v-if="item.FieldType == 3"  type="number" v-decorator="[
								item.ID,
								{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' },{ pattern: /^-?\d+$/g, message: '请输入整数' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
							]" @change="e => NumChange(e, item.ID)" />
						<a-input v-if="item.FieldType == 4" type="number" :step="0.01" v-decorator="[
								item.ID,
								{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
							]" />
						<!-- {{ JSON.stringify(rules) }} -->
						<a-upload v-if="item.FieldType == 5 || item.FieldType == 6"
							v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
							:accept="item.FieldType == 5 ? '.doc,.docx,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document' : 'image/*'"
							:multiple="true"
							:action="requestUrl+'/Common/DoUploadFile?type='+(item.FieldType == 5?'file':'image')"
							list-type="picture-card" :file-list="fileList[item.ID]" @preview="handlePreview"
							@change="e => handleChange(e, item.ID)" :before-upload="e => beforeUploadfile(e, item.ID)">
							<div>
								<a-icon type="plus" />
								<div class="ant-upload-text">Upload</div>
							</div>
						</a-upload>
						
						<a-date-picker v-if="item.FieldType == 7" @change="e => dataChange(e, item.ID, 'data')"
							v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]" />
						<a-time-picker v-if="item.FieldType == 8" @change="e => dataChange(e, item.ID, 'time')"
							v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]" />
						<a-radio-group
							name="radioGroup"
							v-if="item.FieldType == 9"
							@change="e => radioChange(e, item.ID)"
							v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
						>
							<a-radio :value="radioitem" v-for="(radioitem, radioindex) in item.Regular.split(',')">{{ radioitem }}</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
						<a-button type="primary" @click="onSubmit">
							提交
						</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import Cache from '@/utils/cache'
	import {
		GetApplyClubList,
		DoGetCommonClubApplyFormList
	} from '@/api/follow'
	export default {
		props: {
			text: Object,
			// time:null
		},
		watch: {
			text: function(text) {
				this.getList(text.ID)
			}
		},
		data() {
			return {
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 14
				},
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				rules: {},
				data: [],
				fileList: {},
				requestUrl: this.global.requestUrl,
				previewImage: '',
				dataValue: {}
			}
		},
		async created() {

		},
		methods: {
			moment,
			beforeUploadfile(file, name) {

				const isLt10M = file.size / 1024 / 1024 < 10;
				if (!isLt10M) {
					this.fileList[name] = this.fileList[name].splice(this.fileList[name].length - 1, 1)
					this.$message.error('文件大小不能超过10M!');
				}
				return isLt10M;
			},
			NumChange(e,id){
				let num=e.target._value;
				if(num<0){
					this.$message.error('请输入大于0的正整数');
				}
				
			},
			handleChange(info, name) {
				if (!info.file.status) {
					return false;
				}
				let {
					fileList
				} = info;
				const status = info.file.status;
				if (status === 'done') {
					if (info.file.response.code == 0) {
						this.$message.success(info.file.response.msg);
						this.fileList[name] = [...fileList]; //重点
						let str = ''
						let arr = []
						console.log(this.fileList[name]);
						for (let i = 0; i < this.fileList[name].length; i++) {
							if (this.fileList[name][i].url) {
								if (this.fileList[name][i].url.indexOf(this.requestUrl) > -1) {
									arr.push(this.fileList[name][i].name + '|' + this.fileList[name][i].url.substring(this
										.requestUrl.length));
								} else {
									arr.push(this.fileList[name][i].name + '|' + this.fileList[name][i].url);
								}
							} else {
								arr.push(this.fileList[name][i].response.fileName|| + '|' + this.fileList[name][i].response
									.url);
							}
						}
						str = arr.join(',')
						this.$emit('tap', name, str);
					} else {
						this.$message.error(info.file.response.msg);
						this.fileList[name] = this.fileList[name].splice(this.fileList[name].length - 1, 1);
					}
				}
				if (status === 'removed') {
					this.fileList[name] = [...fileList]; //重点
					let str = ''
					let arr = []
					for (let i = 0; i < this.fileList[name].length; i++) {
						if (this.fileList[name][i].url) {
							if (this.fileList[name][i].url.indexOf(this.requestUrl) > -1) {
								arr.push(this.fileList[name][i].name + '|' + this.fileList[name][i].url.substring(this
									.requestUrl.length));
							} else {
								arr.push(this.fileList[name][i].name + '|' + this.fileList[name][i].url);
							}
						} else {
							arr.push(this.fileList[name][i].response.fileName + '|' + this.fileList[name][i].response.url);
						}
					}
					str = arr.join(',')
					this.$emit('tap', name, str);
				}
				this.fileList[name] = [...fileList]; //重点
			},
			handlePreview(file) {
				if (file.url) {
					this.previewImage = file.url;
				} else {
					this.previewImage = this.requestUrl + file.response.url;
				}
				window.open(this.previewImage, '_blank')
			},
			radioChange(e,name){
				this.fileList[name] = e.target.value
			},
			dataChange(e, name, type) {
				let date = moment(e).format('YYYY-MM-DD HH:mm:ss');
				if (type == 'data') {
					if (e) {
						let time = moment(e).format('YYYY-MM-DD HH:mm:ss');
						this.dataValue = Object.assign(this.dataValue, {
							[name]: time
						});
					} else {
						this.dataValue = Object.assign(this.dataValue, {
							[name]: ''
						});
					}
				} else {
					if (e) {
						let time = moment(e).format('HH:mm:ss');
						this.dataValue = Object.assign(this.dataValue, {
							[name]: time
						});
					} else {
						this.dataValue = Object.assign(this.dataValue, {
							[name]: ''
						});
					}
				}
			},
			onSubmit() {
				let data = {}
				this.form.validateFields(async (err, values) => {
					if (!err) {
						let data = {};
						data = values;
						data.clubID = this.text.ID
						data = Object.assign(data, this.dataValue);
						
						for (let key in data) {
							let arr = []
							if (Object.prototype.toString.call(data[key]) === '[object Object]') {
								if (data[key].fileList) {
									data[key].fileList.forEach(item => {
										arr.push(item.response.fileName+'|'+item.response.url)
									})
									data[key] = arr.toString()
								}
							}
						}
						
						let res = await GetApplyClubList(data)
						if (res.data.code === 0) {
							this.$message.success(res.data.msg)
							this.$emit('closeFun')
							this.$refs.ruleForm.resetFields();
						} else {
							this.$message.error(res.data.msg)
							this.$refs.ruleForm.resetFields();
							this.$emit('closeFun')
						}
					} else {
						return false;
					}
				});
			},
			async getList(id) {
				let res = await DoGetCommonClubApplyFormList({
					clubID: id,
					isShow:true
				});
				let d = res.data.data
				this.data = this.$route.name.includes('Home')?d:d.filter(item=>item.IsShow);
				// for (var i = 0; i < this.data.length; i++) {
				// 	if (this.data[i].FieldType == 5 || this.data[i].FieldType == 6) {
				// 		this.fileList = Object.assign(this.fileList, {
				// 			[this.data[i].ID]: []
				// 		});
				// 	}
				// }
			},
			radioOnChange(e) {
				this.selectvalue = e.target.value
			},
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
			},
			closeFunction() {
				this.form.resetFields();
				this.fileList = []
				this.$emit('closeFun')
			},
		}
	}
</script>

<style lang="less" scoped>
	.aid {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;
	}

	.base {
		position: absolute;
		width: 600px;
		height: 650px !important;
		background: #fff;
		left: 50%;
		margin-left: -300px;
		top: 50% !important;
		margin-top: -325px !important;
		overflow-y: auto;

		.main {
			height: 90%;
			overflow-y: scroll;
		}

		/deep/.ant-form-item {
			margin: 20px 50px;

			/deep/.ant-form-item-label {
				width: 100px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: right;
			}

			/deep/.ant-form-item-control-wrapper {
				flex: 1;
			}

			/deep/textarea {
				height: 140px;
			}
		}
	}

	.base p {
		padding: 10px 0 0 10px;
	}

	.subnav {
		margin-left: 60px;
		height: 46px;
		display: flex;
	}

	.subnav p {
		width: 100px;
		text-align: right;
	}

	.subnav input {
		width: 300px;
		height: 30px;
		border: 1px solid #dad9dc;
		margin-left: 20px;
	}

	.ant-form-item {
		margin-bottom: 10px;
	}

	.btn2 {
		display: -moz-box;
		-moz-box-pack: center;
		-moz-box-align: center;

		/* Safari、Opera 以及 Chrome */
		display: -webkit-box;
		-webkit-box-pack: center;
		-webkit-box-align: center;

		/* W3C */
		display: flex;
		box-pack: center;
		box-align: center;
		width: 137px;
		height: 35px;
		border-radius: 3px;
		outline: none;
		border: none;
		margin: 20px auto;
		color: #fff;
	}

	.fixed-top {
		width: inherit;
		position: absolute;
		line-height: 30px;
		top: 0px;
		background-color: white;
		z-index: 999;
	}

	.fixed-bottom {
		width: 600px;
		left: -50px;
		bottom: 0px;
		position: absolute;
		background-color: white;
		z-index: 999;
	}

	/deep/.ant-form {
		margin-top: 50px;
		padding-bottom: 80px;
	}
</style>
